<template>
  <div style="height: 100%;width :100%">
    <div v-if="loading" v-loading="loading" style="height: 100%;width :100%"></div>
    <div v-if="!loading" style="height: 100%;width :100%">
      <div v-show="templateOwnerType == 'doctor'" class="templateGroup">
        <template-card v-for="(t, index) in templates" :key="index" @del="del(t._id, index)" :data="{ id: t._id, name: t.name, owner: t.templateOwnerName, usageCount: 100, remark: t.remark, item: t, ifShare: false }" color="doctor" />
        <template-card color="grey" :data="{ templateOwner: templateOwner, templateOwnerType: templateOwnerType }" />
      </div>
      <div v-show="templateOwnerType == 'dept'" class="templateGroup">
        <template-card v-for="(t, index) in templates" :key="index" @del="del(t._id, index)" :data="{ id: t._id, name: t.name, owner: t.templateOwnerName, usageCount: 100, remark: t.remark, item: t, ifShare: false }" color="dept" />
        <template-card color="grey" :data="{ templateOwner: templateOwner, templateOwnerType: templateOwnerType }" />
      </div>
      <div v-show="templateOwnerType == 'group'" class="templateGroup">
        <template-card v-for="(t, index) in templates" :key="index" @del="del(t._id, index)" :data="{ id: t._id, name: t.name, owner: t.templateOwnerName, usageCount: 100, remark: t.remark, item: t, ifShare: false }" color="group" />
        <template-card color="grey" :data="{ templateOwner: templateOwner, templateOwnerType: templateOwnerType }" />
      </div>
      <div v-show="templateOwnerType == 'hospital'" class="templateGroup">
        <template-card v-for="(t, index) in templates" :key="index" @del="del(t._id, index)" :data="{ id: t._id, name: t.name, owner: t.templateOwnerName, usageCount: 100, remark: t.remark, item: t, ifShare: false }" color="hospital" />
        <template-card color="grey" :data="{ templateOwner: templateOwner, templateOwnerType: templateOwnerType }" />
      </div>
    </div>
  </div>
</template>

<script>
import { getTemplatesAdmin, deleteTemplate } from '@/api/template'
import TemplateCard from '@/components/TemplateCard/TemplateCard3'

export default {
  name: 'Templates',
  components: {
    TemplateCard
  },
  data() {
    return {
      loading: true,
      templates: []
    }
  },
  methods: {
    del(_id, index) {
      deleteTemplate(_id).then(res => {
        this.templates.splice(index, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    }
  },
  computed: {
    templateOwnerType: function() {
      return this.$route.query.templateOwnerType
    },
    templateOwner: function() {
      return this.$route.query.templateOwner
    }
  },
  mounted() {
    getTemplatesAdmin(this.templateOwnerType, this.templateOwner).then(res => {
      this.templates = res.data
      this.loading = false
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .templateGroup {
    display: flex;
  }
</style>